$control-treeview: (
  text-color: getCssVar(color, text, 0),
  bg-color: transparent,
  disabled-color: getCssVar(color, disabled, text),
  padding: getCssVar(spacing, tight) 0,
  row-hover-color: getCssVar(color, text, 0),
  row-hover-bg-color: getCssVar(color, fill, 0),
  row-select-color: getCssVar(color, text, 0),
  row-select-bg-color: getCssVar(color, primary, light, default),
  font-size: getCssVar(font-size, regular),
  font-weight: getCssVar(font-weight, regular),
);

$control-treeview-node: (
  icon-height: getCssVar(width-icon, medium),
  icon-width: getCssVar(width-icon, medium),
  icon-margin-right: getCssVar(spacing, tight),
  height: 26px,
);

$control-treeview-context-menu: (
  width: 30px,
  padding: getCssVar(spacing, tight) getCssVar(spacing, none),
  item-padding: getCssVar(spacing, tight) getCssVar(spacing, base-loose),
  item-height: 40px,
  border-radius: getCssVar(spacing, none),
  bg-color: getCssVar(color, bg, 3),
  hover-color: getCssVar(color, fill, 0),
  text-color: getCssVar(color, text, 2),
);

$control-treeview-quick-search: (
  padding: 0 getCssVar(spacing, base) getCssVar(spacing, tight),
);

$control-treeview-tree: (
  padding: 0 getCssVar(spacing, base),
);

@include b(control-treeview) {
  @include set-component-css-var(control-treeview, $control-treeview);
  @include set-component-css-var(control-treeview-node, $control-treeview-node);
  @include set-component-css-var(control-treeview-context-menu, $control-treeview-context-menu);
  @include set-component-css-var(control-treeview-quick-search, $control-treeview-quick-search);
  @include set-component-css-var(control-treeview-tree, $control-treeview-tree);

  position: relative;
  height: 100%;
  padding: getCssVar(control-treeview, padding);

  @include e(nav-icon) {
    position: absolute;
    top: 14px;
    right: 10px;
    color: getCssVar(color, primary);
    cursor: pointer;
  }

  .el-tree-node {
    @include when(load-more) {
      pointer-events: none;

      .el-icon, .el-checkbox {
        display: none;
      }

      @include b(control-treeview-node) {
        justify-content: center;
        color: getCssVar(color, primary);
        pointer-events: all;
      }
    }
  }
}

@include b(control-treeview-node) {
  display: flex;
  flex-grow: 1;
  flex-shrink: 1;
  align-items: center;
  min-width: 1px;
  height: 100%;

  // 常用操作默认隐藏，节点hover时显示
  .#{bem('context-menu')} {
    display: flex;
    flex-shrink: 0;
  }
  .#{bem('context-menu','item', 'level-200')} {
    display: none;
  }

  &:hover {
    .#{bem('context-menu','item', 'level-200')} {
      display: block;
    }
  }
  @include e(icon) {
    display: flex;
    align-items: center;
    width: getCssVar(control-treeview-node, icon-width);
    height: getCssVar(control-treeview-node, icon-height);
    margin-right: getCssVar(control-treeview-node, icon-margin-right);

    > svg {
      width: 100%;
      height: 100%;
    }
  }

  @include e(label) {
    flex-grow: 1;
    flex-shrink: 1;
    min-width: 1px;
    @include utils-ellipsis;
  }

  &:hover {
    .#{bem(control-treeview-context-menu-trigger)} {
      display: inline-block;
    }
  }

  @include m(disabled) {
    color: getCssVar(control-treeview, disabled-color);
    cursor: not-allowed;
  }

  @include e(buttons) {
    @include m(hover) {
      .#{bem('context-menu','item')} {
        display: none;
      }
    }
  }

  &:hover {
    .#{bem('control-treeview-node', 'buttons', 'hover')} {
      .#{bem('context-menu','item')} {
        display: block;
      }
    }
  }
}

@include b(control-treeview-new-node){
  display: flex;
  align-items: center;
  justify-content: center;
  padding-right: getCssVar(spacing, base);
  padding-left: calc(1em + 12px);
  font-size: #{getCssVar(control-treeview, font-size)};
}

@include b(control-treeview-context-menu-trigger) {
  display: none;
  flex-shrink: 0;
  width: getCssVar(control-treeview-context-menu, width);
  text-align: center;
  cursor: pointer;
  @include e(caption-icon) {
    vertical-align: middle;
  }
}

// 树节点上下文菜单样式
@include b(control-treeview-context-menu) {
  @include set-component-css-var(control-treeview-context-menu, $control-treeview-context-menu);

  &.mx-context-menu {
    padding: getCssVar(control-treeview-context-menu, padding);
    background-color: getCssVar(control-treeview-context-menu, bg-color);
    border-radius: getCssVar(control-treeview-context-menu, border-radius);

    --mx-menu-text: #{getCssVar(control-treeview-context-menu, text-color)};

    .mx-context-menu-item {
      height: getCssVar(control-treeview-context-menu, item-height);
      padding: getCssVar(control-treeview-context-menu, item-padding);
      cursor: pointer;

      &:hover {
        color: getCssVar(control-treeview-context-menu, text-color);
        background-color: getCssVar(control-treeview-context-menu, hover-color);
      }
    }
  }
}

@include b(control-treeview-quick-search) {
  padding: getCssVar(control-treeview-quick-search, padding);
}

@include b(control-treeview-tree) {
  &.el-tree {
    --el-tree-text-color: #{getCssVar(control-treeview, text-color)};
    --el-tree-node-content-height: #{getCssVar(control-treeview-node, height)};

    .el-tree-node__content:hover {
      color: #{getCssVar(control-treeview, row-hover-color)};
      background-color: #{getCssVar(control-treeview, row-hover-bg-color)};
    }

    padding: getCssVar(control-treeview-tree, padding);
    background-color: #{getCssVar(control-treeview, bg-color)};

    .el-tree-node__content:has(.#{bem(control-treeview-new-node)}) {
      .#{bem(control-treeview-new-node)} {
        width: 100%;
        padding-right: 0;
        padding-left: 0;
      }
    } 
  }


  &.el-tree.el-tree--highlight-current
  .el-tree-node.is-current
  > .el-tree-node__content {
    color: #{getCssVar(control-treeview, row-select-color)};
    background-color: #{getCssVar(control-treeview, row-select-bg-color)};
  }
}

@include b(control-treeview-editing-node) {
  --el-input-height: #{getCssVar(control-treeview, node, height)};
}
